<template>
  <view class="container">
    
    <view class="tab-bar" :class="{ 'sticky-tab-bar': isGoods }">
      <view class="tab-item" :class="{active: tabIndex === 0}" @click="changeTab(0)">综合</view>
      <view class="tab-item" :class="{active: tabIndex === 1}" @click="changeTab(1)">价格</view>
      <view class="tab-item" :class="{active: tabIndex === 2}" @click="changeTab(2)">销量</view>
    </view>

    <view class="guess-section">
      <view
          v-for="(item, index) in newGoodsDeatilList" :key="index"
          class="guess-item"
          @click="navToDetailPage(item)"
      >
        <view class="image-wrapper">
          <image :src="item.picUrl" mode="aspectFill"></image>
        </view>
        <text class="title clamp">{{item.brief}}</text>
        <text class="price">￥{{item.counterPrice}}</text>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getHotGoods
  } from '@/config/api/goods.js';

  export default {
    data() {
      return {
		isGoods: false,
        newGoodsDeatilList: [],
        searchKeyword: '', // 新增用于绑定input值的变量
        tabIndex: 0,
        categoryList: ['时尚女装', '工艺品'],
        showCategories: false, // 用于控制分类标签是否显示
        searchParameter: {
          name: '',
          categoryId: 0,
          orderPrice: 0,
        },
        isPrice: 0,
        num: 0,
		number: 0,
        isNull: false,
      }
    },
    async onLoad() {
      this.getHotGoods();
    },
    methods: {
      async loadData() {

      },
      async getHotGoods(item) {
        try { // 新品
		  let dtsGoods = {
			  isHot: 1,
			  sales: 0,
			  counterPrice: 0,
		  };
		  if (item != null && item.isPS) {
			  dtsGoods.counterPrice = item.counterPrice;
		  } else if(item != null && !item.isPS) {
			  dtsGoods.sales = item.sales;
		  }
          const res = await getHotGoods(dtsGoods)
          if (res && res.data && typeof res.data === 'object' && 'code' in res.data && res.data.code === 200) {
            this.newGoodsDeatilList = res.data.data
            console.log(this.newGoodsDeatilList);
          } else {
            console.error('请求失败:', res?.data?.msg || '未知错误');
          }
        } catch (error) {
          console.error('接口异常:', error)
          this.$message.error('数据加载失败')
        }
      },
      // 商品详情页
      navToDetailPage(item) {
        console.log(item);
        //测试数据没有写id，用title代替
        let id = item.id;
        uni.navigateTo({
          url: `/pages/product/product?id=${id}`
        })
      },
      changeTab(index) {
		if (this.number != index) {
			this.num = 0;
		}
        this.tabIndex = index;
        if (index == 1) {
			this.number = index;
			let a = 0;
			this.num += this.tabIndex;
			if (this.num % 2 == 1) {
				a = 1;
			} else {
				a = 2;
			}
			this.getHotGoods({
				isPS: true,
				counterPrice: a,
			})
        } else if (index == 2){
			this.number = index;
			let a = 0;
			this.num += this.tabIndex;
			if (this.num % 4 == 0) {
				a = 2;
			} else {
				a = 1;
			}
			this.getHotGoods({
				isPS: false,
				sales: a,
			})
        } else {
			this.number = index;
			this.num == 0;
			this.getHotGoods(
				
			)
		}
      },
    }
  }
</script>

<style lang="scss">
  page {
    height: 100%;
    background-color: #F4F4F4;
  }
  /* #ifdef MP */
 .mp-search-box {
	margin-top: -1px;
    height: 40px;
    width: 100%;
    padding: 0 20upx;
    border-top: solid #D9D9D9 1px;
    border-bottom: solid #D9D9D9 1px;
    background-color: #fff;
    position: relative;
   .ser-input {
      position: relative;
      top: 5px;
      width: 320px;
      height: 56upx;
      line-height: 56upx;
      font-size: 28upx;
      color: $font-color-base;
      border-radius: 5px;
      background-color: #F4F4F4;
      padding-left: 1em;
    }

   .qu {
      position: relative;
      left: 335px;
      top: -20px;
    }
  }

 .sticky-search-box {
    position: sticky;
	top: 0;
    z-index: 2; /* 确保在其他元素之上 */
  }

  /* #endif */
 .history-record-section {
    padding: 10rpx;
    background-color: #fff;
  }

 .history-record-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
  }

 .history-record-item {
    background-color: #fff;
    /* 设置记录项背景为白色 */
    border: 1px solid #e0e0e0;
    /* 添加边框 */
    padding: 5rpx 10rpx;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
  }

 .delQC {
    float: right;
    /* 让清除按钮靠右 */
    color: #999;
    /* 设置颜色 */
    margin-right: 10rpx;
    /* 调整右边距 */
  }
 .guess-section {
    display: flex;
    flex-wrap: wrap;
    padding: 0 30upx;
    background: #fff;
    margin-top: 5px;
   .guess-item {
      display: flex;
      flex-direction: column;
      width: 48%;
      padding-bottom: 40upx;
      &:nth-child(2n + 1) {
        margin-right: 4%;
      }
    }
   .image-wrapper {
      width: 100%;
      height: 330upx;
      border-radius: 3px;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
        opacity: 1;
      }
    }
   .title {
      font-size: $font-lg;
      color: $font-color-dark;
      line-height: 80upx;
    }
   .price {
      font-size: $font-lg;
      color: $uni-color-primary;
      line-height: 1;
    }
  }
 .tab-bar {
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    z-index: 1;
  }
 .sticky-tab-bar {
    position: sticky;
    top: 40px; /* 假设搜索框高度为 40px，根据实际情况调整 */
  }
 .tab-item {
    padding: 10rpx 20rpx;
    font-size: 30upx;
    color: #333;
    cursor: pointer;
    transition: color 0.3s ease;
  }
 .tab-item.active {
    color: #f40;
    border-bottom: 2px solid #f40;
  }
 .category-tags {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 10rpx;
    z-index: 1;
  }
 .sticky-category-tags {
    position: sticky;
    top: 73px; /* 假设搜索框和 tab-bar 总高度为 80px，根据实际情况调整 */
  }
 .category-tag {
    border: 1px #000 solid;
    border-radius: 5px;
    padding: 5rpx 10rpx;
    margin: 15px;
    cursor: pointer;
  }
</style>